<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <img src="../assets/zjt.png" alt="" class="back" @click="back()" />
        <div>
          <img
            src="../assets/shoucang.png"
            alt=""
            v-show="store == false"
            @click="storeOn(0)"
          />
          <img
            src="../assets/shoucang_1.png"
            alt=""
            v-show="store == true"
            @click="storeOn(1)"
          />
          <img src="../assets/jubao.png" alt="" @click="report()" />
          <img src="../assets/fenxiang.png" alt="" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="con-top">
        <span>{{JobDetail.recruit.title}}</span>
        <span>{{JobDetail.recruit.salaryRange}}</span>
      </div>
      <div class="con-title">
        <div>
          <img src="../assets/add.png" alt="" />
          {{JobDetail.company.location}}
        </div>
        <div>
          <img src="../assets/gzjy.png" alt="" />
          {{JobDetail.recruit.workYearRange}}
        </div>
        <div>
          <img src="../assets/xueli.png" alt="" />
          {{JobDetail.recruit.eduBgdRange}}
        </div>
      </div>
      <div class="hr">
        <img src="../assets/avatar.png" alt="" class="hr-avatar" />
        <div class="hr-div">
          <p>x先生<span>刚刚活跃</span></p>
          <span>xx公司&nbsp;·&nbsp;招聘者</span>
        </div>
        <!-- <img src="../assets/yjt.png" alt="" class="yjt" /> -->
      </div>
      <div class="post">
        <p class="post-p">职位详情</p>
        <div class="skill">
          <!-- <span>{{JobDetail.recruit.positionType}}</span> -->
          <span v-for="(item, i) in JobDetail.recruit.welfareName">{{item}}</span>
        </div>
        <div class="skillText">
		    {{JobDetail.recruit.description}}
		  <br/>
          
        </div>
      </div>
      <div class="firm">
        <div class="firm-top" @click="goFirm(JobDetail.company.id)">
          <img src="../assets/avatar.png" alt="" class="firm-avatar" />
          <div class="firm-div">
            <p>{{JobDetail.company.companyName}}</p>
            <span class="firm-span"> {{JobDetail.company.scale}}人&nbsp;·&nbsp;{{JobDetail.company.industry}} </span>
          </div>
          <img src="../assets/yjt.png" alt="" class="yjt" />
        </div>
        <div class="firm-add">
          <img src="../assets/ditu.jpg" alt="" />
		  <img src="JobDetail.company.addressPath" alt="" />
		  <!-- {{JobDetail.company.addressPath}} -->
        </div>
      </div>
      <div class="post">
        <p class="post-p">相似职位</p>
        <div class="block" v-for="item in JobDetail.sameRecruit" @click="goDtl(item.id)"> 
          <div class="block-top">
            <span>{{ item.title }}</span>
            <span>{{ item.salaryRange }}</span>
          </div>
          <div class="block-class">
            <span>{{ item.workYearRange }}</span>
            <span>{{ item.eduBgdRange }}</span>
          </div>
          <div class="block-btn">
            <span>{{ item.companyName }}</span>
            <span>{{ item.regionName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" @click="deliver()">
      <div>立即投递</div>
    </div>
  </div>
</template>

<script>
import { MessageBox,Toast  } from 'mint-ui';
export default {
  inject: ["reload"],
  name: "post",
  components: {MessageBox,Toast},
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      status: localStorage.status,
      store: false,
      id:0,
	    recruitId:this.$route.params.recruitId,
	    JobDetail: {
        recruit:{
          accessNum: 1322,
          addtime: "2021-12-20 15:55:47",
          city: 210200,
          companyId: 2,
          companyName: "大连爱尚教育",
          deletestatus: false,
          description: "韩国人特合同号红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼",
          eduBgd: 5,
          eduBgdRange: "本科",
          id: 2,
          modified: "2021-12-22 14:05:50",
          positionId: 7,
          positionType: "PHP",
          recruitNum: 15,
          recruitSalary: 4,
          recruitStatus: 1,
          recruitType: 1,
          regionName: "大连市",
          salaryCount: 14,
          salaryRange: "8-10K",
          title: "网页设计001",
          typeName: "直招",
          welfare: "2,3,5",
          welfareName: Array(3),
          workYear: 2,
          workYearRange: "1-3年",
        },
        company: {
          address: "大连市高新区黄浦路科创大厦",
          addressPath: "http://localhost:8080/renren-fast//imageUpload/photo/农机网.png",
          addtime: "2021-12-20 15:52:15",
          cityId: 210200,
          companyCode: "312321312312321321312",
          companyId: 1,
          companyName: "大连华企智源",
          deletestatus: false,
          id: 1,
          identityPath: null,
          industry: "IT",
          inviteCode: null,
          legalName: "李江超",
          licensePath: null,
          location: "大连市-高新园区",
          managementStatus: 0,
          memberPoints: 454,
          scale: 400,
          verifyStatus: true,
        },
        sameRecruit:[
          {
          accessNum: 1322,
          addtime: "2021-12-20 15:55:47",
          city: 210200,
          companyId: 2,
          companyName: "大连爱尚教育",
          deletestatus: false,
          description: "韩国人特合同号红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼",
          eduBgd: 5,
          eduBgdRange: "本科",
          id: 2,
          modified: "2021-12-22 14:05:50",
          positionId: 7,
          positionType: "PHP",
          recruitNum: 15,
          recruitSalary: 4,
          recruitStatus: 1,
          recruitType: 1,
          regionName: "大连市",
          salaryCount: 14,
          salaryRange: "8-10K",
          title: "网页设计001",
          typeName: "直招",
          welfare: "2,3,5",
          welfareName: Array(3),
          workYear: 2,
          workYearRange: "1-3年",
        },
        {
          accessNum: 1322,
          addtime: "2021-12-20 15:55:47",
          city: 210200,
          companyId: 2,
          companyName: "大连爱尚教育",
          deletestatus: false,
          description: "韩国人特合同号红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼红土壤和认同荼",
          eduBgd: 5,
          eduBgdRange: "本科",
          id: 9,
          modified: "2021-12-22 14:05:50",
          positionId: 7,
          positionType: "PHP",
          recruitNum: 15,
          recruitSalary: 4,
          recruitStatus: 1,
          recruitType: 1,
          regionName: "大连市",
          salaryCount: 14,
          salaryRange: "8-10K",
          title: "网页设计001",
          typeName: "直招",
          welfare: "2,3,5",
          welfareName: Array(3),
          workYear: 2,
          workYearRange: "1-3年",
        },
        ]
      }
    };
  },
  created() {
	  //初始化
    console.log('post')
	  this.init(this.recruitId)
  },
  // methods 编写js函数
  methods: {
	//个人收藏职位
	collect(){
		//获取登录账户id localStore中获取
		//职位id JobDetail.recruit.id
		Toast("收藏成功");
	},
	//个人取消收藏职位
	cancelCollect(){
		//获取登录账户id
		//职位id JobDetail.recruit.id
		
	},
	//初始化
	init(id){
		//根据招聘职位id，查询职位页面信息
		// this.$http({
		//   method: "get",
		//   url: 'api/recruit/info/'+id,
		//   params: {
		//   },
		// })
		// .then(({data}) => {
		//   //根据职位id查询的结果
		//   this.JobDetail = data;
		//   console.log(this.JobDetail);
    
		// })
	},
    back() {
      
      this.$router.go(-1); //返回上一层
    },
    //跳转公司详情
    goFirm(id) {
      this.$router.push({
        name:"firm",
        params:{'companyId':id}
        
      });
    },
    goDtl(id){
      alert(id)
      this.$router.push({name:'post', params:{'recruitId':id}})
    },
    storeOn(i) {
      if (i == 0) {
        this.store = true;
		//个人收藏表添数据
		this.collect();
      } else if (i == 1) {
        MessageBox.confirm("确定要取消收藏该职位吗?")
          .then((action) => {
            this.store = false;
			//个人收藏表删除数据
			this.cancelCollect();
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    report() {
      MessageBox.confirm("确定要举报该职位吗?")
        .then((action) => {
			
          Toast("举报成功");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deliver(i) {
        MessageBox.confirm("确定要投递该职位吗?")
          .then((action) => {
			  this.$http({
			    method: "get",
			    url: 'api/ycuserpost/save',
			    params: {
			  			'recruitId': this.JobDetail.recruit.id,
						'userId': localStorage.getItem("userId")
			    },
			  }).then(({data}) => {
				  console.log(data);
				  if(data.msg == '简历不存在，请先创建简历！') {
					  Toast("投递失败，简历不存在，请先创建简历！");
					  this.$http.push("/resume");
				  } 
				  else if(data.msg == '简历已投递过啦！') {
					  Toast("简历已投递过啦！");
				  }
				  else {
					  Toast("投递成功");
				  }
			  })
          })
          .catch((err) => {
            console.log(err);
          });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}
.head-fixed {
  width: 100%;
  height: 84px;
  position: fixed;
  z-index: 999;
}
.head {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  background: #fff;
  justify-content: space-between;
  /* border-bottom: 1px solid #dfdfdf; */
  /* box-shadow: 2px 2px 5px #c7c7c7; */
}
.head div {
  display: flex;
  width: 30%;
  justify-content: space-between;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.content {
  position: relative;
  top: 40px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px 40px 10px;
}
.con-top {
  box-sizing: border-box;
  padding: 10px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.con-top span:first-child {
  font-weight: 900;
  font-size: 20px;
}
.con-top span:last-child {
  font-size: 16px;
  color: #3e63a8;
}
.con-title {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  padding-bottom: 15px;
}
.con-title div {
  padding-right: 20px;
  display: flex;
  font-size: 12px;
}
.con-title div img {
  width: 14px;
  height: 14px;
}
.hr {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px 0;
  border: 1px solid #dfdfdf;
  border-left: 0;
  border-right: 0;
  align-items: center;
}
.hr-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.yjt {
  width: 14px;
  height: 14px;
}
.hr-div {
  display: flex;
  flex: 1;
  flex-flow: column;
  font-size: 12px;
}
.hr-div p {
  padding-bottom: 5px;
  font-weight: 900;
}
.hr-div p span {
  font-weight: 500;
  font-size: 10px;
  color: #757575;
  margin-left: 10px;
}
.post {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
}
.post-p {
  font-weight: 900;
  font-size: 12px;
  padding: 10px 0;
}
.skill {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.skill span {
  background: #f3f3f3;
  color: #333;
  font-size: 12px;
  padding: 5px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.skillText {
  padding-bottom: 10px;
  font-size: 12px;
}
.firm {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 0;
  border: 1px solid #dfdfdf;
  border-left: 0;
  border-right: 0;
  display: flex;
  flex-flow: column;
}
.firm-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  align-items: center;
}
.firm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.yjt {
  width: 14px;
  height: 14px;
}
.firm-div {
  display: flex;
  flex: 1;
  flex-flow: column;
}
.firm-div p {
  padding-bottom: 5px;
  font-weight: 900;
  font-size: 12px;
}
.firm-span {
  font-size: 12px;
}
.firm-add {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
}
.firm-add img {
  width: 100%;
  height: 100%;
}
.block {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
}
.block .block-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.block-top span:first-child {
  color: #333;
  font-weight: 700;
}
.block-top span:last-child {
  color: #3e63a8;
}
.block-calss {
  width: 100%;
}
.block-class span {
  background: #f0f0f0;
  color: #757575;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 10px;
}
.block-company {
  font-size: 12px;
  color: #757575;
}
.block-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #757575;
}
.bottom {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 5px;
  position: fixed;
  z-index: 999;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #dfdfdf;
}
.bottom div {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  background: #3e63a8;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  line-height: 30px;
  font-size: 14px;
}
</style>
